<script setup>
    import CardTitle from '../../../components/CardTitle.vue'

    const props = defineProps({
        projectViewData: {
            type: Object,
            default: {}
        }
    })

    let { street, town, administrativeVillage, community, totalArea, ploughArea, croplandArea, totalPopulation, agriculturalPopulation, annualGrainOutput } = props.projectViewData

    const viewList = [
        { name: '乡镇', data: [{ label: '个街道', value: street }, { label: '个镇', value: town }] },
        { name: '行政村', data: [{ label: '个社区', value: administrativeVillage }, { label: '个行政村', value: community }] },
        { name: '总面积', data: [{ label: 'km²', value: totalArea }] },
        { name: '耕地面积', data: [{ label: '万亩', value: ploughArea }] },
        { name: '高标准农田面积', data: [{ label: '万亩', value: croplandArea }] },
        { name: '总人口', data: [{ label: '人', value: totalPopulation }] },
        { name: '农业人口', data: [{ label: '人', value: agriculturalPopulation }] },
        { name: '年粮食产量', data: [{ label: '万吨', value: annualGrainOutput }] },
    ]

    
    const getImage = (index) => {
        return new URL(`../../../assets/images/project-0${index+1}.png`, import.meta.url).href
    }

</script>

<template>
    <div class="project-view"> 
        <card-title title="项目区概况"></card-title>

        <div class="view-list">
            <div 
                class="view-item"
                v-for="(item, index) in viewList"
                :key="index"
            >
                <div class="title flex-between">
                    <span>{{ item.name }}</span>
                    <img :src="getImage(index)">
                </div>

                <div class="view-content">
                    <span 
                        class="text"
                        v-for="(sub, sIndex) in item.data"
                        :key="sIndex"
                    >
                        <label>{{ sub.value }}</label>
                        {{ sub.label }}
                        {{ sIndex != item.data.length-1 ? '、' : '' }}
                    </span>
                </div>

            </div>
        </div>

    </div>
</template>

<style lang="less" scoped>
    .project-view{
        width: 100%;
        height: 511px;
        background: url('../../../assets/images/project-view.png') center no-repeat;
        background-size: 100% 511px;

        .view-list{
            padding: 0 22px;
            margin-left: -10px;

            .view-item{
                width: 220px;
                height: 88px;
                padding: 17px 0px 18px 15px;
                display: inline-block;
                border: 1px solid #010429;
                box-shadow: 0px 0px 5px 0px #3271E6;
                border-radius: 2px;
                margin: 0 0 10px 10px;
                color: #fff;
                overflow: hidden ;

                .title{
                    font-size: 14px;
                    padding-right: 15px;
                }

                .view-content{
                    height: 20px;
                    padding-top: 3px;
                    font-size: 14px;

                    label{
                        font-size: 24px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
</style>